<template>
  <!-- 在线监测的油色谱 -->
  <div class="right-table mediumtablestyle">
    <el-table
      :data="table03Arrs"
      :row-class-name="tableRowClassName"
      @row-dblclick="handledbClick"
      style="width: 100%"
      border
      height="100%"
    >
      <!-- <el-table-column prop="bayName" label="间隔" :show-overflow-tooltip="true"></el-table-column> -->
      <el-table-column
        width="200"
        prop="name"
        label="名称"
        sortable
        :sort-method="sortMethod"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop="value" :show-overflow-tooltip="true" label="实时数据">
        <template slot-scope="scope">
          <div v-if="scope.row.unit && scope.row.value">{{ scope.row.value + scope.row.unit}}</div>
          <!-- <div v-else-if=" scope.row.value"></div> -->
          <div v-else>{{ scope.row.value }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="typeName" :show-overflow-tooltip="true" label="监测类型"></el-table-column>
      <el-table-column prop="myDate" :show-overflow-tooltip="true" width="100" label="监测时间"></el-table-column>
      <el-table-column prop="status" :show-overflow-tooltip="true" label="状态" width="65">
        <template slot-scope="scope">
          <div
            :class="[scope.row.status=='0' ?'orange0':'',scope.row.status=='1' ?'orange1':'', scope.row.status=='2' ?'orange2':'',scope.row.status=='3' ?'orange3':'',scope.row.status=='4' ?'orange4':'',scope.row.status=='5' ?'orange5':'' ]"
          >{{ scope.row.status |zxjcBataleState }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="Historical" :show-overflow-tooltip="true" label="历史曲线" width="75">
        <template slot-scope="scope">
          <span class="iconClick" @click="iconClick(scope.row)"></span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="obj.name+'历史记录'"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
    >
      <PopUp v-if="dialogVisible" :obj="obj" :equipments="equipments" />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import PopUp from "../../../components/PopUp.vue";
import time from "@/utils/time.js";
@Component({
  components: { PopUp },
})
export default class rightTablet extends Vue {
  @Prop() table03Arr!: any;
  @Prop() equipment!: any;
  @Prop() treeList!: any;

  // 弹框状态
  public dialogVisible: boolean = false;
  //表格数据

  popupName: string = "";
  obj: any = {};
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  sortMethod(a, b) {
    return b.status - a.status;
  }
  //曲线icon事件
  iconClick(vlue: Object) {
    console.log(vlue);
    this.obj = vlue;
    this.dialogVisible = true;
  }
  handleClose() {
    this.dialogVisible = false;
  }
  get table03Arrs() {
    // 按照相别排序
    // function orderName(name = "") {
    //   let nameOrderObj = {
    //     A相: 1,
    //     a相: 2,
    //     B相: 3,
    //     b相: 4,
    //     C相: 5,
    //     c相: 6,
    //     def: 99,
    //   };
    //   let regexp = /(A相|a相|B相|b相|C相|c相)/g;
    //   let test = regexp.test(name);
    //   let key = RegExp.$1 || "def";
    //   return nameOrderObj[key];
    // }
    var tableData = [];
    tableData = this.table03Arr;
    // console.log(tableData);

    if (tableData && tableData.length) {
      tableData.forEach((v) => {
        v.time = time(v.time) || "";
        v.myDate = v.time.slice(0, 10);
        // v.orderName = orderName(v.name);
        if (v.isGj == "gj") {
          v.orderGj = v.orderNum - 0 - 1000000;
        } else {
          v.orderGj = v.orderNum;
        }
      });
      // 过滤遥测
      tableData = tableData.filter((v) => {
        return v.remoteType !== "2";
      });
    }
    // tableData = tableData.sort((a, b) => a.remark - b.remark);
    tableData = tableData.sort((a, b) => a.orderGj - b.orderGj);
    console.log("tableData", tableData);
    return tableData;
  }
  handledbClick(row) {
    this.$emit("rowId", row.id);
  }
  //装置list数
  get equipments() {
    // 过滤遥测
    var tableData = this.treeList.filter((v) => {
      return v.remoteType !== "2";
    });
    if (this.equipment) {
      var dataTree = JSON.parse(JSON.stringify(this.equipment));
      console.log(dataTree);

      var MydataTree = [];
      dataTree.map((v) => {
        var obj1: any = {};
        obj1.name = v.bayName;
        obj1.bayId = v.bayId;
        obj1.id = v.id;
        obj1.children = [];
        obj1.myType = "jg";
        tableData.map((p) => {
          if (v.bayId == p.bayId) {
            var obj2: any = {};
            obj1.bayName = p.bayName;
            obj2.name = p.name;
            obj2.bayId = p.bayId;
            obj2.id = p.id;
            obj2.type = p.type;
            obj2.myType = "dw";

            obj1.children.push(obj2);
            console.log();
          }
        });
        MydataTree.push(obj1);
      });
    }
    console.log(121, MydataTree, "asdsadasdasdasd");

    return MydataTree;
  }
  mounted() {
    // console.log(this.table03Arr);
  }
}
</script>

<style lang="scss" scoped>
.right-table {
  width: 100%;
  height: 100%;
  padding: 0 0.2rem 0.1rem;
  .iconClick {
    display: inline-block;
    width: 0.42rem;
    height: 0.2rem;
    background: url(../../../../../assets/img/OnlineMonitor/cli_qx.png)
      no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
    cursor: pointer;
  }
  .iconClick:hover {
    background: url(../../../../../assets/img/OnlineMonitor/nor_qx.png)
      no-repeat;
    background-size: 100% 100%;
  }

  .iframe {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    opacity: 0.1;
    background: none;
    pointer-events: none;
  }
}
</style>
<style lang="scss">
//弹窗
.right-table {
  .el-dialog {
    width: 11rem !important;
    height: 6.32rem;
  }
  .el-dialog__body {
    height: calc(100% - 44px);
  }
}
</style>

